<template>
  <div class="login">
    <div class="logo">
      <img src="@/assets/images/login/2.png" alt="">
    </div>
    <div class="form">
      <van-form @submit="onSubmit" label-width=".4rem">
        <van-field v-model="username" placeholder="请输入手机号">
          <template #label>
            <van-icon name="user-o" color="#2892FF" size=".38rem" style="font-weight: bolder;" />
          </template>
        </van-field>
        <van-field v-model="imgCode" placeholder="请输入图形验证码">
          <template #label>
            <van-icon name="photo-o" color="#2892FF" size=".38rem" style="font-weight: bolder;" />
          </template>
          <template #extra>
            <img src="@/assets/images/login/3.png" alt="" class="imgCode">
          </template>
        </van-field>
        <van-field v-model="smsCode" placeholder="请输入短信验证码">
          <template #label>
            <van-icon name="shield-o" color="#2892FF" size=".38rem" style="font-weight: bolder;" />
          </template>
          <template #extra>
            <span v-if="showFlag" style="font-size: 0.24rem;color: #2892FF;margin-right: .3rem"
              @click="sendCode">点击获取</span>
            <van-count-down v-else :time="time" format="ss" @finish="finish">
              <template #default="timeData">
                <span class="block" style="width: 1rem; height: 0.8rem; line-height: 0.8rem; text-align: center; display: inline-block;">{{ timeData.seconds }}s</span>
              </template>
            </van-count-down>
          </template>
        </van-field>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">登录</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'layoutLogin',
  data() {
    return {
      showFlag: true,
      time: 60 * 1000,
      username: '',
      imgCode: '',
      smsCode: ''
    }
  },
  methods: {
    sendCode() {
      this.showFlag = false
    },
    finish() {
      this.showFlag = true
      this.time = 60 * 1000
    },
    onSubmit() {
      sessionStorage.setItem("showFlag", true)
      this.$router.push('/home')
    },
  }
}
</script>
<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  background: url(../../assets/images/login/1.png) no-repeat;
  background-size: 100%;

  .logo {
    margin: 2.67rem auto 0;

    img {
      display: block;
      width: 3.2rem;
    }
  }
  .form {
    padding: 0 .6rem;
    margin-top: 1.3rem;
      /deep/ .van-cell {
          margin-bottom: .3rem;
          height: .8rem;
          line-height: .8rem;
          padding: 0 0 0 .3rem;
      }
  }
    .imgCode {
        width: 1.71rem;
        height: .66rem;
        margin-top: .07rem;
        margin-right: .11rem;
    }
}
</style>
